<!-- 评价完成 -->
<template>
	<view class="evaluate-status">
		<view class="title">
			<image src="../../../static/images/user/check.png" mode="widthFix"></image>
			<text>评价完成</text>
		</view>
		<view class="evaluate-status-msg">您的评价将帮助到更多伙伴~</view>
		<view class="evaluate-status-btn-container">
			<view class="evaluate-status-btn" @click="back">返回首页</view>
			<view class="evaluate-status-btn" @click="toCommon">
				查看评价
				<text class="wlIcon-fanhui2"></text>
			</view>
		</view>
		<!-- <view class="card evaluate">
      <view class="top-msg">
        <view>获取更多积分</view>
        <view>全部评价</view>
      </view>
      <view class="product-list">
        <view class="product-msg" v-for="(item,key) in goods" :key="key">
          <view class="product-img">
            <img :src=" $wanlshop.oss(common.appStyle.guess_you_like_icon) + ')'" alt="">
          </view>
          <view class="msg">xxxxxxx</view>
        </view>
      </view>
    </view> -->

		<view class="wanl-you-like margin-bottom-sm"
			:style="{ backgroundImage: `url(${cdnUrl + common.appStyle.guess_you_like_icon})` }"></view>
		<wanl-product :dataList="likeData" />
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import wanlshop_config from '../../../common/config/config';
	export default {
		data() {
			return {
				// orderId: '',
				// storeId: '',
				// orderData: {},
				id: '',
				type: '',
				current_page: 1,
				last_page: 0,
				status: "noMore",
				likeData: [],
				reload: true,
				goods: [],
				cdnUrl: wanlshop_config.cdnurl
			};
		},
		computed: {
			...mapState(['user', 'statistics', 'common']),
		},
		onLoad(options) {
			const {
				id,
				type
			} = options;
			this.id = id;
			this.type = type;
			// this.getOrder()
			this.loadlikeData();
		},
		onReachBottom() {
			if (this.current_page >= this.last_page) {
				this.status = "noMore";
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = "loading";
				this.loadlikeData();
			}
		},
		methods: {
			/* getOrder(){
			  this.$api.get({
			    url: '/wanlshop/order/getOrderList',
			    data: {
			      state:4
			    },
			  }).then(res=>{
			    this.goods = data
			  })
			}, */
			back() {
				/* uni.reLaunch({
					url: '/pages/user/order/order?state=4'
				}) */
				uni.switchTab({
					url: '/pages/index'
				})
			},
			toCommon() {
				if (this.type == 'order') {
					uni.reLaunch({
						url: '/pages/product/comment?id=' + this.id
					})
				}
				if (this.type == 'service') {
					uni.reLaunch({
						url: '/pages/service/select_shop_comment?ids=' + this.id
					})
				}
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				this.$api.get({
					url: "/wanlshop/product/likes?pages=evaluate",
					data: {
						page: this.current_page,
					},
					success: (res) => {
						this.likeData = this.reload ?
							res.data :
							this.likeData.concat(res.data); //评论数据 追加
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = res.total == 0 ? "noMore" : "more";
					},
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.evaluate-status {
		min-height: 100vh;
		background: $page-color-base;
		padding: 0 15rpx;
		box-sizing: border-box;
	}

	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.card {
		background: #fff;
		border-radius: 10rpx;
		padding: 25rpx 15rpx;
		margin-bottom: 20rpx;
	}

	.evaluate-status-msg {
		text-align: center;
		margin-bottom: 20px;
	}

	.evaluate-status-btn-container {
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx;

		.evaluate-status-btn {
			padding: 0 20rpx;
			border: 1px solid #BCBCBC;
			color: $font-color-dark;
			font-size: 26rpx;
			min-width: 85px;
			height: 30px;
			border-radius: 30px;
			line-height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.top-msg {
		display: flex;
		align-items: center;
	}

	.product-list {
		.product-msg {
			display: flex;

			.product-img {
				width: 160rpx;
				height: 200rpx;
				border-radius: 10rpx;
				background: red;
			}

			.msg {
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}
</style>